<script setup lang="ts">
import { defineAsyncComponent, onUnmounted } from 'vue';

const props: any = defineProps<{
    ujt: any;
    asaidata: any;
}>();

// {
//     eq: 0,// 0=没有标识，1=冒号，2=大括号[]{}，3=双引号
//     ic: 0,// 0=缩进，1=图标
// }
let comps: any = {};

// 动态加载组件专用的挂载方案--------001
// 先动态挂载一下组件
const imComp: any = import.meta.glob(['./*.vue'], {
    eager: true,
});
// 获取组件名
function getVueName(path: string) {
    const match = path.match(/([^\\/]+)(?=\.vue$)/);
    return match ? match[1] : null;
}
// 处理组件名与组件的键值对
for (let key in imComp) {
    imComp[getVueName(key) || key] = imComp[key];
    delete imComp[key];
}
// 动态加载组件专用的挂载方案--------002
if (props.asaidata.comp) {
    Object.assign(props.asaidata.comp, imComp);
} else {
    props.asaidata.comp = { ...imComp };
}
function getComp(comp: any) {
    if (comp?.default) {
        return comp.default;
    }
    return defineAsyncComponent(comp);
}
props.asaidata.cmComp = (key: string) => {
    if (!comps[key]) {
        if (
            props.asaidata?.rule?.[key]?.comp &&
            props.asaidata.comp[props.asaidata.rule[key].comp]
        ) {
            comps[key] = getComp(
                props.asaidata.comp[props.asaidata.rule[key].comp]
            );
        } else if (props.asaidata.comp[key]) {
            comps[key] = getComp(props.asaidata.comp[key]);
        } else if (
            key === 'object' &&
            props.asaidata.comp &&
            props.asaidata.comp['object']
        ) {
            comps[key] = getComp(props.asaidata.comp['object']);
        }
    }
    return comps[key];
};

onUnmounted(() => {
    comps = null;
});
</script>

<template>
    <div class="as-form-area">
        <AsaiFormLi :ujt="ujt" :asaidata="asaidata" :formdata="asaidata.data">
        </AsaiFormLi>
    </div>
</template>

<style lang="scss">
.as-form-area {
    label {
        display: flex;

        > span {
            display: inline-block;
        }

        > select,
        > input {
            flex-grow: 1;
            padding-left: 10px;
            margin-right: 10px;
        }
    }
}

.as-li {
    display: block;
    padding-left: 12px;
}
.as-form-ico-close,
.as-form-ico-open,
.as-form-ico-arr,
.as-form-ico {
    display: inline-block;
    padding-right: 3px;
}

.as-form-ico::before {
    content: '▫ ';
    color: var(--ch4);
}
.as-form-ico-arr::before {
    content: '▹ ';
    color: var(--ch4);
}
.as-form-ico-close::before {
    content: '⊟ ';
    color: var(--ch4);
    cursor: pointer;
}
.as-form-ico-open::before {
    content: '⊞ ';
    color: var(--cm4);
    cursor: pointer;
}
.as-form-ico-require::after {
    content: '*';
    color: var(--cz8);
}

.as-form-obj {
    > span {
        // background-color: var(--cm2);
    }

    .as-form-obj {
        padding-left: 12px;
    }

    label {
        padding-left: 12px;
    }
}
</style>
